<!-- 查看快递 -->
<template>
	<view class="page">
		<view v-if="isLoaded">
			<!-- 快递类型 -->
			<view class="express-type">
				<image class="product-img" src="/pagesC-order/static/images/will-delete/goods1.png" mode="aspectFill">
				</image>
				<text class="name">中通快递</text>
				<text class="number">：ZT45346346252</text>
				<button class="copy-btn" @click="handleCopy('ZT45346346252')">复制</button>
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<text class="icon iconfont">&#xe62f;</text>
				<view class="right">
					<view class="order-num">
						<text class="number">订单编号：20241023352464</text>
						<button class="copy-btn" @click="handleCopy('20241023352464')">复制</button>
					</view>
					<text class="address">收货地址：广东省广州市增城区朱村街道科汇二街4号</text>
				</view>
			</view>

			<!-- 快递记录时间轴 -->
			<!-- <view class="timeline" v-if="expressTrack && expressTrack.length">
				<view class="timeline-item" v-for="(item, index) in expressTrack" :key="index">
					<text class="location">{{item.desc}}</text>
					<text class="datetime">{{item.otime}}</text>
				</view>
			</view> -->
			<view class="timeline">
				<view class="timeline-item">
					<text class="location">已发货，等待揽件</text>
					<text class="datetime"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	const isLoaded = ref(true); // 是否加载完成
	const id = ref(''); // 传入的订单id
	// 详情数据
	const lists = ref([]);
	const order = ref({});
	const expressTrack = ref([]); // 物流信息

	onLoad((options) => {
		id.value = options.id;
		// getDetail();
		// getTrack();
	})

	// 获取订单详情
	const getDetail = async () => {
		uni.showLoading({
			title: '加载中...'
		});

		const res = await this.$api.order_api.detail({
			order_id: this.id
		});
		uni.hideLoading();
		this.isLoaded = true;

		this.lists = res.data.data.lists || [];
		this.order = res.data.data.order;
		const expressTrack = this.order.express_track;
		if (expressTrack && expressTrack.length && !this.expressTrack.length) {
			this.expressTrack = expressTrack;
		}
	}

	// 获取实时物流信息
	const getTrack = async () => {
		const res = await this.$api.order_api.getExpressTrack({ id: this.id });
		const expressTrack = res.data.data || [];
		if (expressTrack && expressTrack.length > this.expressTrack.length) {
			this.expressTrack = expressTrack;
		}
	}

	// 复制
	const handleCopy = async (text) => {
		uni.setClipboardData({
			data: text,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})
			}
		});
	}
</script>

<style lang="scss" scoped>
	$redColor: #FE3333;
	$greenColor: #00aa00;

	.express-type {
		display: flex;
		align-items: center;
		border-top: 2rpx solid #fafafa;
		padding: 20rpx 30rpx;
		background-color: white;

		.product-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.name {
			font-size: 28rpx;
			color: $greenColor;
		}

		.number {
			flex-grow: 1;
			font-size: 28rpx;
		}

		.copy-btn {
			height: 36rpx;
			font-size: 22rpx;
			text-align: center;
			line-height: 36rpx;
			border-radius: 8rpx;
			border: 2rpx solid #aaa;
			box-sizing: border-box;
			padding: 0 14rpx;
			margin-left: 20rpx;
			background-color: transparent;
			transition: transform 0.2s;

			&:active {
				transform: scale(0.9);
			}
		}
	}

	.order-info {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-top: 2rpx solid #fafafa;
		background-color: white;
		box-sizing: border-box;

		.icon {
			font-size: 40rpx;
		}

		.right {
			flex-grow: 1;
			width: 0;
			margin-left: 20rpx;
		}

		.order-num {
			display: flex;
			justify-content: space-between;

			.number {
				font-size: 28rpx;
			}

			.copy-btn {
				height: 36rpx;
				font-size: 22rpx;
				text-align: center;
				line-height: 36rpx;
				border-radius: 8rpx;
				border: 2rpx solid #aaa;
				box-sizing: border-box;
				padding: 0 14rpx;
				margin-left: 20rpx;
				background-color: transparent;
				transition: transform 0.2s;

				&:active {
					transform: scale(0.9);
				}
			}
		}

		.address {
			display: block;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 10rpx;
		}
	}

	.timeline {
		border-top: 2rpx solid #fafafa;
		background-color: white;

		&-item {
			position: relative;
			padding: 20rpx 30rpx 20rpx 100rpx;
			color: #888;

			&::before,
			&::after {
				position: absolute;
				display: block;
				content: '';
			}

			&::before {
				z-index: 1;
				top: 24rpx;
				left: 50rpx;
				transform: translateX(-50%);
				width: 18rpx;
				height: 18rpx;
				border: 6rpx solid white;
				background-color: #888;
				border-radius: 50%;
			}

			&::after {
				top: 24rpx;
				left: 50rpx;
				transform: translateX(-50%);
				width: 2rpx;
				height: 100%;
				background-color: #888;
			}

			&:first-child {
				color: $greenColor;

				&::before {
					border-color: #00c500;
					background-color: $greenColor;
				}
			}

			&:last-child {
				&::after {
					display: none;
				}
			}

			.location {
				display: block;
				font-size: 28rpx;
			}

			.datetime {
				font-size: 22rpx;
			}

		}
	}
</style>